<template>
  <div class="box">
    <div class="bg"></div>
    <van-nav-bar
      id="van-bar"
      :title="title"
      fixed
      :border="border"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #left>
        <img
          :style="{ width: widthPx, height: heightPx }"
          src="@/assets/iconPerfectInformation/nav_back@2x.png"
        />
      </template>
    </van-nav-bar>
    <div
      :style="
        'margin-top:' +
        topheight +
        'px;height:calc(100vh - ' +
        topheight +
        'px);width:100%;overflow:auto;'
      "
    >
      <van-list v-model="loading" :finished="finished" finished-text="— THE END —" @load="getData" class="blacklist">
        <div class="list" v-for="(item, index) in list" :key="index" @click="goto(item)">
          <img class="headImg" :src="item.user.avatar" alt="" srcset="" />
          <span class="name">{{ item.user.nickname }}</span>
          <span class="sex" v-if="item.user.sex == 1"
        style="background-color: #CDE1FD;"
            ><img src="@/assets/myicon/nan.png" alt="" srcset="" /><span
              class="age" style="color:  #3662EC;"
              >{{ item.user.age }}</span
            ></span
          >
          <span class="sex" v-if="item.user.sex == 2"
            ><img src="@/assets/myicon/nv.png" alt="" srcset="" /><span
              class="age" 
            >{{ item.user.age }}</span
          ></span>
          <span class="vip" v-if="item.user.vip!=0">VIP</span>
          <div class="btn" @click="del(item.user.uid)" v-if="searchParameter.type=='follows'">取消关注</div>
        </div>
        <!-- <p style="text-align: center;margin: 24px 0;color: #AAAAAA;font-size: 10px;">— THE END —</p> -->
      </van-list>
    </div>
  </div>
</template>

<script>
import {getUserList,userFollow} from "@/api/index"
import { Toast } from 'vant'

export default {
  data() {
    return {
      border: "",
      widthPx: "28px",
      heightPx: "28px",
      topheight: 0,
      isActive: 0,
      title: "",
       loading: false,
      finished: false,
      searchParameter:{
        page:1,
        limit:10,
        type:''
      },
      list: [
       
      ],
    };
  },
  created(){
    
  },
  mounted() {
     if (this.$route.query.type=='fans') {
      this.title='粉丝列表'
     this.searchParameter.type=this.$route.query.type
      
     this.getData()

     }else{
     this.searchParameter.type=this.$route.query.type

      this.title='关注列表'
     this.getData()

     }
    this.topheight = document.getElementById("van-bar").offsetHeight;
    
  },

  methods: {
    onClickLeft() {
      this.$router.back();
    },
      goto(e){
      if (e.user.is_merchant==1) {
      this.$router.push({
        path: "/detail",
        query:{id:e.user.uid}
      })  
      }else{
        this.$router.push({
        path: "/userDetail",
        query:{id:e.user.uid}
      })  
      }
    },
    del(e){
      userFollow({
        friend_uid: e,
        type: 0,
      }).then((res) => {
          Toast('取消关注成功！')
        
        this.getData()
      })
    },
     getData(){
    
      console.log( this.searchParameter);
      const queryString = Object.keys(this.searchParameter)
        .map((key) => {
          console.log(typeof this.searchParameter[key])
          if (this.searchParameter[key] && !!this.searchParameter[key]) {
            return `${encodeURIComponent(key)}=${encodeURIComponent(
              this.searchParameter[key]
            )}`
          }
        })
        .filter((res) => {
          return res
        })
        .join('&')
        getUserList({...this.searchParameter}).then((res) => {
        // this.list=res.data.list
        let list=[]
        this.list = list.concat(...res.data.list)
        console.log(this.list);
        // 加载状态结束
        this.loading = false
        this.finished = true
      })
    },
  },
};
</script>

<style scoped>
.blacklist {
  width: 345px;
  margin: 0 auto;
}
.headImg {
  width: 40px;
  height: 40px;
   border-radius: 50%;
}
.list {
  padding: 16px 0;
  position: relative;
  border-bottom: #D8D8D8 solid 1px;
}
.list span {
  display: inline-block;
  vertical-align: top;
}
.name{
  margin: 0 7px;
  line-height: 40px;
  font-size: 16px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
color: #1A1A1A;

}
.sex {
  background-color: #fcdbdb;
  border-radius: 8px;
  height: 16px;
  margin: 12px 7px;
        width: 38px;
  text-align: center;
  line-height: 16px;
  color: #fa5151;
}
.vip {
  margin: 12px 7px;

  width: 30px;
  height: 16px;
  background: linear-gradient(180deg, #e8b87a 0%, #fde0b9 100%);
  border-radius: 8px;
  text-align: center;
  line-height: 17px;
  vertical-align: top;
  font-size: 12px;
  color: #663409;
}
.sex img {
  margin-right: 2px;
  width: 8px;
  display: inline-block;
  margin-top: 3px;
  height: 12px;
}
.sex .age {
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
  margin-top: 3px;
  height: 12px;
}
.van-cell {
  background-color: transparent;
}
.van-cell::after {
  border-color: #d8d8d8;
}
.van-cell__value {
  color: #1a1a1a;
  font-weight: 500;
}
.btn{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
text-align: center;
    width: 84px;
height: 28px;
border-radius: 8px;
line-height: 28px;
border: 1px solid #767676;
font-size: 12px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #767676;
}
</style>
